<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Layout>
        <Header class="layout-header-bar">
          <Row>
            <i-col span="3">
              <div class="logo-con">
                <a href="#"><img :src="logo" /></a>
              </div>
            </i-col>
            <i-col span="14">
              <i-menu mode="horizontal" style="height: 65px;">
                <Menu-item to="/index" name="1" style="font-size: 1rem;">
                  首页
                </Menu-item>
                <Menu-item to="/index/teacher" name="2" style="font-size: 1rem;">
                  老师
                </Menu-item>
                <Menu-item to="/index/news" name="3" style="font-size: 1rem;">
                  新闻
                </Menu-item>
                <Menu-item to="/index/notice" name="4" style="font-size: 1rem;">
                  通知
                </Menu-item>
                <Menu-item to="/index/org" name="5" style="font-size: 1rem;">
                  机构
                </Menu-item>
              </i-menu>
            </i-col>
            <!--<i-col span="6">-->
              <!--<Input search enter-button placeholder="搜索课程..."  class="search-course"/>-->
            <!--</i-col>-->
            <i-col span="6">
              <Dropdown style="float:right;" v-if="isLogin" placement="bottom-start" @on-click="userCenter">
                <a href="javascript:void(0)" >
                  <img :src="avatar" style="z-index: 9999;float:right;width: 40px;height: 40px;border-radius: 50%;margin-top: 14px;margin-bottom: 14px">
                  <Icon type="ios-arrow-down" style="color: transparent"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="myClass">我的课程</DropdownItem>
                  <DropdownItem name="myOrder">订单中心</DropdownItem>
                  <DropdownItem name="settings">个人设置</DropdownItem>
                  <DropdownItem name="exit">安全退出</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Dropdown style="float:right;" v-if="isLogin === false">
                <a href="javascript:void(0)" @click="loginAction" style="font-size: 16px;color: #0f0f0f;">
                  登录
                </a>
                /
                <a href="javascript:void(0)" @click="registerAction" style="font-size: 16px;color: #0f0f0f;">
                  注册
                </a>
              </Dropdown>
              <Dropdown style="float:right;" placement="bottom-end">
                <a href="javascript:void(0)" >
                  移动版
                  <Icon type="ios-arrow-down" style="color: transparent"></Icon>
                </a>
                <DropdownMenu slot="list" style="padding-bottom: -10px !important;">
                  <img :src="QRCode" >
                </DropdownMenu>
              </Dropdown>
              <Modal v-model="loginModal" width="420" footer-hide	>
                <p slot="header" style="color:#f60;text-align:center">
                  <span>登录</span>
                </p>
                <div class="login-con">
                  <div class="form-con">
                    <login-form @on-success-valid="handleSubmit"></login-form>
                    <p class="login-tip">
                      <span class="register" @click="goToRegister">注册</span>
                      <span class="forgot-password">忘记密码？</span>
                    </p>
                  </div>
                </div>
              </Modal>
              <Modal v-model="regModal" width="420" footer-hide	>
                <p slot="header" style="color:#f60;text-align:center">
                  <span>注册</span>
                </p>
                <div class="login-con">
                  <div class="form-con">
                    <Form :model="regForm" :label-width="80">
                      <FormItem label="手机号">
                        <Row>
                          <Col span="16">
                            <Input v-model="regForm.mobile" placeholder="请输入手机号"/>
                          </Col>
                          <Col span="5">
                            <Button @click="getMobileCode" :class="{disabled: !this.canClick}" type="info">{{buttonContent}}</Button>
                          </Col>
                        </Row>
                      </FormItem>
                      <FormItem label="验证码">
                        <Input v-model="regForm.code" placeholder="请输入手机验证码"/>
                      </FormItem>
                      <FormItem label="所属机构">
                        <Select v-model="regForm.orgId" filterable clearable>
                          <Option v-for="item in orgList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="密码">
                        <Input v-model="regForm.password" type="password" placeholder="请输入密码"/>
                      </FormItem>
                      <FormItem label="确认密码">
                        <Input v-model="regForm.password2" type="password" placeholder="请再次输入密码"/>
                      </FormItem>
                      <div style="text-align: center;">
                        <Button type="primary" style="width: 80%;" @click="registerSubmit">立即注册</Button>
                      </div>
                    </Form>
                  </div>
                </div>
              </Modal>
            </i-col>
          </Row>
        </Header>
        <Content>
          <router-view></router-view>
        </Content>
        <Footer style="height: 120px;background-color: #f8fafc !important;padding-left: 20px !important;padding-bottom: 10px !important;padding-top: 0px !important;">
          <div style="float: left;padding: 3rem 10rem;">多喆科技 &copy;2018 版权所有 侵权必究</div>
          <div style="float: right;padding: 3rem 10rem;">多喆科技 &copy;2018 版权所有 侵权必究</div>
        </Footer>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import logo from '@/assets/images/logo.jpg'
import avatar from '@/assets/images/avatar.jpg'
import QRCode from '@/assets/images/student/qrcode.png'
import LoginForm from '@/components/login-form'
export default {
  components: {
    LoginForm
  },
  name: 'frame',
  data () {
    return {
      logo,
      avatar,
      QRCode,
      visible: false,
      single: '',
      isLogin: false,
      loginModal: false,
      regModal: false,
      loginForm: {},
      modal_loading: false,
      formValidate: {
        name: '',
        password: ''
      },
      loginRuleValidate: {
        name: [
          {required: true, message: '请输入正确的邮箱或手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入6-16位密码,区分大小写,不能用空格', trigger: 'blur'}
        ]
      },
      orgList: [],
      buttonContent: '获取验证码',
      totalTime: 300,
      canClick: true,
      regForm: {
        mobile: '',
        orgId: '',
        code: '',
        password: '',
        password2: ''
      }
    }
  },
  created () {
    this.checkLogin()
    this.getOrgList()
  },
  mounted () {
    if (localStorage.getItem('x-token')) {
      this.isLogin = true
    }
    if (localStorage.getItem('isLogin')) {
      this.isLogin = true
    }
  },
  methods: {
    handleSubmit ({userName, password}) {
      let url = '/api/sys/staff/login'
      let form = this.$qs.stringify({
        loginName: userName,
        password: password
      })
      this.$post(url, form).then((res) => {
        if (res.code === 0) {
          if (res.data.code === 20004) {
            this.$Message.error(res.data.errorMessage)
            return false
          }
          localStorage.setItem('x-token', res.data.token)
          this.$router.push(res.data.routeUrl)
          this.loginModal = false
          this.isLogin = true
        } else {
          this.$Message.warning('用户名或密码错误')
        }
      })
    },
    goToRegister () {
      this.loginModal = false
      this.regModal = true
    },
    getOrgList () {
      let url = '/api/api/student/org/list'
      this.$get(url).then((res) => {
        if (res.code === 0) {
          this.orgList = res.data
        }
      })
    },
    getMobileCode () {
      if (this.regForm.mobile === '' || this.regForm.mobile == null) {
        this.$Message.error({
          content: '手机号不能为空！'
        })
      } else {
        let url = '/api/api/student/register/phoneCode'
        let form = this.$qs.stringify({
          phone: this.regForm.mobile
        })
        this.$post(url, form).then((res) => {
          console.log(res)
          if (res.code === 0) {
            if (res.data === true) {
              this.$Message.success({
                content: '发送验证码成功！'
              })
              this.countDown()
            }
            if (res.data.code === 20004) {
              this.$Message.info({
                content: res.data.errorMessage
              })
            }
          }
        })
          .catch((error) => {
            if (error.status === 500) {
              this.$Message.error({
                content: error.message
              })
            }
          })
      }
    },
    countDown () {
      if (!this.canClick) return
      // 改动的是这两行代码
      this.canClick = false
      this.buttonContent = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.buttonContent = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.buttonContent = '重新发送验证码'
          this.totalTime = 10
          this.canClick = true
          // 这里重新开启
        }
      }, 1000)
    },
    registerSubmit () {
      let url = '/api/api/student/register'
      if (this.regForm.mobile === '' || this.regForm.mobile == null) {
        this.$Message.error({
          content: '手机号不能为空！'
        })
      } else {
        if (this.regForm.password !== this.regForm.password2) {
          this.$Message.error({
            content: '两次输入的密码不一致！'
          })
        } else {
          let param = this.regForm
          this.$post(url, param).then((res) => {
            console.log(res)
            console.log(res)
            if (res.code === 0) {
            }
          })
            .catch((error) => {
              if (error.status === 500) {
                this.$Message.error({
                  content: error.message
                })
              }
            })
        }
      }
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    loginAction () {
      this.loginModal = true
      // this.$router.push('/index/login')
    },
    checkLogin () {
      let token = localStorage.getItem('x-token')
      if (token === 'undefined') {
        this.isLogin = false
      }
    },
    registerAction () {
      this.regModal = true
      // this.$router.push('/index/register')
    },
    userCenter (name) {
      // this.$router.push('/index/ucenter/myClass')
      // alert('11111')
      if (name === 'myClass') {
        this.$router.push('/index/ucenter/myClass')
      }
      if (name === 'myOrder') {
        this.$router.push('/index/ucenter/myOrder')
      }
      if (name === 'settings') {
        this.$router.push('/index/ucenter/settings')
      }
      if (name === 'exit') {
        this.$Modal.confirm({
          title: '退出提示',
          content: '<p>确定要退出吗？</p>',
          onOk: () => {
            localStorage.removeItem('x-token')
            this.$router.push('/index/login')
          }
        })
      }
    },
    login () {}
  }
}
</script>

<style scoped>

  .logo-con {
    float: left;
    height: 64px;
    width:160px;
    line-height: 64px;
    margin: 0 20px;
  }
  .logo-con img{
    max-height: 64px;
    width: 100%;
  }
  .layout-header-bar {
    background: #fff !important;
    z-index: 900;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
  }
  .search-course {
    float: right;
    margin-right: 40%;
    width: 60%;
    height: 28px !important;
    padding: 15px 0;
    line-height: 64px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  .search-course input {
    width: 100%;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  .cart-number{
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    background: #f01414;
    border-radius: 50%;
    color: #fff;
    margin-left: 8px;
  }
  .register {
    cursor: pointer;
  }
  .forgot-password {
    float: right;
  }
</style>
